<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<!-- #ifdef H5-->
		<view class="searchbox">
			<Search class="searchbox" title="搜索组件" type="search" :config="config"/>
		</view>
		<!-- #endif -->
		
		<view class="category-body" :style="'height:'+height+'px'">
			<!--一级分类容器-->
			<scroll-view class="nav-left" scroll-y="true" :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
				<view class="nav-left-item text-ellipsis" @click="categoryClickMain(item.id)" :key="index" :class="item.id==categoryActive?'active':''"
					v-for="(item,index) in tree">
					{{item.title}}
				</view>
			</scroll-view>
			<!--子分类容器-->
			<view class="nav-right" :style="'height:'+height+'px'">
				<scroll-view class="child-items" scroll-x="true" scroll-left="1">
					<view v-for="(child,index) in tree" :key="index" class="child-item" :class="child.id==categoryActive?'active':''">
						<view class="nav-right-item" :class="categoryId == categoryActive?'active':''" @click="categoryClickChild(categoryActive)">
							<image :src="child.cover_100" />
							<view>全部</view>
						</view>
						<view class="nav-right-item" :class="categoryId == item.id?'active':''" v-for="(item,i) in child._child" :key="i" @click="categoryClickChild(item.id)">
							<image :src="item.cover_100" />
							<view class="text-ellipsis">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
				
				<!--商品列表容器-->
				<view class="list-section" :style="'height:'+listSectionHeight+'px'">
					<mescroll-uni ref="mescrollRef" :top="mescrollTop" :down="downOption" :fixed="false" @down="downCallback" @up="upCallback">
						<!-- 数据列表 -->
						<view class="list">
							<view class="item" v-for="(item,index) in list" :key="index" @click="goToDetailLink(item.id)">
								<view class="content">
									<view class="cover">
										<image mode="widthFix" :src="item.cover_200" class="image"></image>
									</view>
									<view class="info">
										<view class="title text-ellipsis-2">{{item.title}}</view>
										<view class="price">￥ {{handlePrice(item.price,0)}}.<text class="pointback">{{handlePrice(item.price,1)}}</text></view>
										<view class="exp-info">
											<view class="item view">
												<uni-icons type="eye" size="10" color="#999"></uni-icons> 
												<text class="num">{{item.handling_view}}</text>
											</view>
											<view class="item sales">
												<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
												<text class="num">{{item.handling_sales}}</text>
											</view>
											<view class="item favorites">
												<uni-icons type="star" size="10" color="#999"></uni-icons> 
												<text class="num">{{item.handling_favorites}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
		<!-- #ifdef H5-->
		<tabBar :config="config" :footer="config.footer.data" />
		<!-- #endif -->
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MinishopGoodsList from '../../diys/MinishopGoodsList/MinishopGoodsList.vue' //专栏列表组件
	import Top from '../common/top.vue'
	import Search from '../../diys/Search/Search.vue'//搜索框
	import TabBar from "../common/tabBar.vue"//底部导航
	
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			FullscreenLoading,
			MinishopGoodsList,
			Top,
			Search,
			TabBar,
		},
		data() {
			return {
				loading: true, // 数据是否加载完成
				tree: {},
				height: 0, //分类区域高度
				categoryActive: 0,
				categoryId: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				scrollHeight: 0,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight: 0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				
				listSectionHeight: 200,
				mescrollTop: 0,
				mescrollBottom: 0,
				page: 1, //当前页码
				list: [], //列表数据
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				},
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			this.getUrlParam()
		},

		created() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight
			// #ifdef H5
			this.height = this.height - 102
			// #endif
			//console.log(this.height)
			this.getCategoryTree()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
			},
			
			/**
			 * 获取分类数据
			 */
			getCategoryTree: function(){
				let that = this
				let promise = new Promise(function(resolve, reject){
					//获取分类数据
					that.util.request({
						url : 'entry/wxapp/category',
						data : {
							'action': 'tree'
						},
						success: function (res) {
							if (res.data.code == 200) {
								that.tree = res.data.data
								resolve()
							}
						}
					})
				})
				promise.then(function(){
					that.setDefaultCategoryActive()
					that.$nextTick(()=>{
						that.getHeightList();
					})
					that.loading = false
				})
			},
			getHeightList: function(){
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this)
				//console.log(selectorQuery)
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					//console.log(JSON.stringify(rects))
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * _this.tree.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
					})
					//console.log(arr)
					_this.arr = arr
				}).exec()
				
				selectorQuery.selectAll('.child-item').boundingClientRect(function(rects) {
					console.log(rects[0])
					//_this.arr = arr
					_this.listSectionHeight = _this.height - rects[0].height
				}).exec()
			},
			
			setDefaultCategoryActive: function(){
				this.categoryActive = this.urlParams.id
				this.categoryId = this.urlParams.id
				//console.log(this.categoryId)
				if(this.urlParams.id == undefined || this.urlParams.id == 0){
					this.categoryId = this.tree[0]['id']
					this.categoryActive = this.tree[0]['id']
				}
			},
			
			/**
			 * 一级列表事件
			 * @param {Object} id
			 */
			categoryClickMain: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				this.categoryActive = id;
				this.scrollTop == this.arr[id] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[id]//防止两次相等造成点击不触发滚动时间
				let promise = new Promise(function(resolve, reject){
				    //console.log(id);
					that.categoryId = id
					//清空列表、初始化分页
					that.list = []
					that.page = 1
				    resolve()
				});
				promise.then(function(){
					//that.getGoodsList()
					that.mescroll.resetUpScroll() // 再刷新列表数据
				})
				
			},
			
			categoryClickChild: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				let promise = new Promise(function(resolve, reject){
				    console.log(id);
					that.categoryId = id
					//清空列表、初始化分页
					that.list = []
					that.page = 1
				    resolve()
				});
				promise.then(function(){
					//that.getGoodsList()
					that.mescroll.resetUpScroll() // 再刷新列表数据
				})
			},
			
			//路由至详情页
			goToDetailLink: function(id){
				let urlParams = 'id='+id
				let url = '../goods/detail?' + urlParams
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},

			//上拉加载的回调
			upCallback: function() {
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = this.page
					data.category_id = this.categoryId
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/goods'
					//#endif
					//#ifdef H5
					url = 'entry/site/goods'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							let list = res.data.data.data
							that.list = that.list.concat(list);
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(list.length);
							that.page = that.page + 1
						}
					}
				})
			},
			//下拉刷新
			downCallback: function() {
				let that = this
				
				this.page = 1
				let data = {}
					data.action = 'lists'
					data.page = this.page
					data.category_id = this.categoryId
				//获取分页列表首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/goods'
					//#endif
					//#ifdef H5
					url = 'entry/site/goods'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.list = []
							that.list = res.data.data.data
							//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							that.mescroll.endSuccess(that.list.length);
							that.page = 2
						}
					}
				})
			},
			
			
			followWechat: function(){
				this.$refs.openDetail.open()
			},
           
			/**
			* 关注公众号
			*/
			followWechat: function(){
				this.$refs.openDetail.open()
			},
			close: function(){
				this.$refs.openDetail.close()
			},
		   
			handlePrice(price,index){
				return price.split(".")[index];
			}
		}
	}
</script>

<style lang="scss">

.category-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav-left {
	width: 23%;
	background: #ffffff;
	.nav-left-item {
		height: 96rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 96rpx;
		color: #666;
		&:last-child{
			border-bottom: none;
		}
	}
	.nav-left-item.active {
		color: $Blue;
		background: #f2f2f2;
		border-right: 0;
	}
}


.nav-right {
	width: 77%;
	background-color: #f2f2f2;
	padding: 0 20rpx;
	.child-items {
		border-bottom: 10rpx solid #f2f2f2;
		background-color: #ffffff;
		.child-item {
			display: none;
			white-space: nowrap;

			.nav-right-item {
				width: 130rpx;
				height: 180rpx;
				display: inline-block;
				text-align: center;
				padding: 20rpx;
				font-size: 28rpx;
				color: #666;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.nav-right-item.active {
				font-weight: 600;
			}
		}
		.child-item.active {
			display: block;
		}
	}

	.list-section {
		position: relative;
		
		
		.list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 0;
			margin: 0 -10rpx;
			>.item {
				box-sizing:border-box;
				width: calc(50% - 20rpx);
				background-color: #fff;
				margin: 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx rgba(0,0,0,.02);
				overflow: hidden;
				.content {
					.cover {
						position: relative;
						overflow: hidden;
						.image {
							width: 100%;
							border-radius: 14rpx 14rpx 0 0;
							display: block;
						}
					}
					.info {
						padding: 10rpx 20rpx 20rpx 20rpx;
						.title {
							font-size: 24rpx;
							color: #2d2f2e;
							font-weight: 400;
							height: 56rpx;
							line-height: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
						}
						.description {
							color: #999;
							font-size: 24rpx;
						}
						.price {
							margin-top: 10rpx;
							font-size: 26rpx;
							.pointback{
								font-size: 22rpx;
							}
						}
						.exp-info {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
							.item {
								display: inline;
								margin: 0;
								.num {
									margin: 0 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}

::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}

/*风格样式*/
.Blue {
	.nav-left {
		.nav-left-item.active {
			color: $Blue;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Blue;
		}
	}
}
.Green {
	.nav-left {
		.nav-left-item.active {
			color: $Green;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Green;
		}
	}
}
.LightRed {
	.nav-left {
		.nav-left-item.active {
			color: $LightRed;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $LightRed;
		}
	}
}
.Orange {
	.nav-left {
		.nav-left-item.active {
			color: $Orange;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Orange;
		}
	}
}
.LightPink {
	.nav-left {
		.nav-left-item.active {
			color: $LightPink;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $LightPink;
		}
	}
}
.Magenta {
	.nav-left {
		.nav-left-item.active {
			color: $Magenta;
		}
	}
	.nav-right {
		.nav-right-item.active {
			color: $Magenta;
		}
	}
}

</style>
